<script setup lang="ts">
import { getMusicListInfo, getMusicListItem } from "@/apis/music/list";
import type { MusicListType } from "@/types/list";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import MusicList from "@/components/MusicList.vue";
const route = useRoute();
const musicListId = ref(0);
const musicList = ref<MusicListType>({});
const musicListItem = ref<any[]>([]);
const musicListLimit = ref(10);
const musicListOffset = ref(0);
onMounted(() => {
  musicListId.value = Number(route.query.id) || 0;
});
onMounted(async () => {
  const res = await getMusicListInfo({ id: musicListId.value });
  //   console.log(res.data);
  musicList.value = res.data;
  const musicItem = await getMusicListItem({
    id: musicListId.value,
    limit: musicListLimit.value,
    offset: musicListOffset.value,
  });
  //   console.log(musicItem.data);
  musicItem.data.songs.forEach((item) => {
    musicListItem.value.push(item);
  });
});
</script>
<template>
  <div class="MusicList">
    <div class="listContent">
      <el-container>
        <el-header height="200px">
          <img :src="musicList.playlist?.coverImgUrl" alt="" />
          <div class="listDescribe">
            <h1>{{ musicList.playlist?.name }}</h1>
            <p class="createPerson">
              创建人:&nbsp;{{ musicList.playlist?.creator.nickname }}
              <img :src="musicList.playlist?.creator.avatarUrl" alt="" />
            </p>
            <p class="listType">
              "
              <span v-for="item in musicList.playlist?.tags">{{
                item + " "
              }}</span
              >"
            </p>
            <p class="musicListDesc">
              描述:&nbsp;{{ musicList.playlist?.description }}
            </p>
          </div>
        </el-header>
        <el-main>
          <MusicList :musicListId="musicListId"></MusicList>
        </el-main>
      </el-container>
    </div>
    <!-- <MusicPlayer></MusicPlayer> -->
  </div>
</template>
<style scoped lang="scss">
.MusicList {
  width: 100%;
  height: 100%;
  //   display: flex;
  .listContent {
    width: 100%;
    height: 100%;
    .el-container {
      .el-header {
        background-color: rgb(249, 156, 171);
        // background: #5dbfdf;
        box-shadow: inset -31px 31px 62px #be4f76, inset 31px -31px 62px #ff6ba0;
        border-radius: 10px;
        display: flex;
        justify-content: start;
        align-items: center;
        column-gap: 15px;
        padding: 25px;
        img {
          width: 150px;
          border-radius: 10px;
          box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.6);
        }
        .listDescribe {
          display: flex;
          height: 100%;
          flex-direction: column;
          row-gap: 10px;
          h1 {
            font-size: 20px;
            color: #000000;
          }
          p {
            font-size: 12px;
            color: #000000;
          }
          p.createPerson {
            width: 60%;
            display: flex;
            column-gap: 20px;
            justify-content: space-between;
            align-items: center;
            img {
              width: 25px;
              border-radius: 50%;
            }
          }
          p.listType {
            color: rgb(239, 8, 116);
          }
          .musicListDesc {
            width: 60%;
            // white-space: nowrap;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            // text-overflow: e;
            overflow: hidden;
          }
        }
      }
    }
  }
  //   .musicPlayer {
  //     width: 60%;
  //     height: 70px;
  //     position: fixed;
  //     bottom: 0;
  //     left: 50%;
  //     transform: translateX(-50%);
  //   }
}
</style>
